import { Button, Image, Space, Table, Popconfirm } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import React, { useContext } from 'react'
import { ResourceZoneContext } from '../../_context'
import xlsx from '@/assets/images/xlsx.png'
import docx from '@/assets/images/docx.png'
import pdf from '@/assets/images/pdf.png'
import styles from './index.module.less'
import IconSvg from '@/components/IconSvg'
import { IResourceList } from '../../type'
import CheckAuth from '@/components/CheckAuthority'

const imgs: any = {
  xlsx,
  docx,
  pdf,
}

const getImg = (value: string) => {
  if (value === 'xlsx' || value === 'xls') {
    return imgs.xlsx
  }
  if (value === 'docx' || value === 'doc') {
    return imgs.docx
  }
  if (value === 'pdf') {
    return imgs.pdf
  }
}

export default () => {
  const { tableList, handleChangePage, pageParams, getFile, deleteHandle, viewHandle } = useContext(ResourceZoneContext)
  const columns: ColumnsType<IResourceList> = [
    {
      title: '图片',
      dataIndex: 'type',
      key: 'type',
      width: 60,
      render: (value) => <Image preview={false} src={getImg(value)} />,
    },
    {
      key: 'id',
      render: (_, record) => (
        <div className={styles.wrapper}>
          <div>{record.name}</div>
          <div className={styles.content}>
            <div>发布时间：{record.publishDate}</div>
            <div>阅读量：{record.readCount}</div>
            <div>下载量：{record.downCount}</div>
          </div>
        </div>
      ),
    },
    {
      key: 'name',
      width: 140,
      render: (_, record) => (
        <div className={styles.btns}>
          <Button onClick={() => viewHandle(record)} icon={<IconSvg name='look' />} type='link'>
            查看
          </Button>
          <Button icon={<IconSvg name='download' />} onClick={() => getFile(record)} type='link'>
            下载
          </Button>
          <CheckAuth role={10}>
            <Popconfirm title='确定删除吗？' onConfirm={() => deleteHandle(record)} okText='确定' cancelText='取消'>
              <Button danger icon={<IconSvg name='delete' />} type='link'>
                删除
              </Button>
            </Popconfirm>
          </CheckAuth>
        </div>
      ),
    },
  ]
  return (
    <Table
      className={styles.table}
      showHeader={false}
      columns={columns}
      rowKey={'id'}
      pagination={{
        position: ['bottomRight'],
        total: pageParams.totalCount,
        onChange: (page: number, pageSize: number | undefined) => {
          if (pageSize && pageSize !== pageParams.pageSize) {
            // 更换了页数
            handleChangePage(1, pageSize || pageParams.pageSize)
            return
          }
          handleChangePage(page, pageSize || pageParams.pageSize)
        },
        current: pageParams.pageIndex,
        pageSize: pageParams.pageSize,
        showSizeChanger: true,
        // showQuickJumper: true,
        showTotal: (total: number) =>
          `共 ${total} 条记录  第 ${pageParams.pageIndex} / ${Math.ceil(total / pageParams.pageSize)}页`,
      }}
      dataSource={tableList}
    />
  )
}
